<template>
  <div class="page">
    <a class="cur">1</a>
    <a href="#" class="PageLink">2</a>
    <a href="#" class="PageLink">3</a>
    <a href="#" class="PageLink">4</a>
    <a href="#" class="PageLink">5</a>
    <a href="#" class="PageLink">6</a>
    <a href="#" class="PageLink">7</a>
    <a href="#" class="PageLink">8</a>
    <a href="#" class="PageLink">9</a>
    <span class="PageMore">...</span>
    <a href="#" class="PageLink">50</a>
    <a href="#" class="next">下一页</a>
  </div>
</template>

<script setup>
</script>

<style scoped>
/* 整体分页容器 */
.page {
  display: flex;
  justify-content: flex-start; /* 页码左对齐 */
  align-items: center;
  gap: 5px;
  padding: 8px 0;
  font-family: Arial, sans-serif;
}

/* 页码按钮样式 */
.page a,
.page .PageMore {
  padding: 4px 10px;
  font-size: 12px;
  text-decoration: none;
  color: #333;
  background-color: #f5f5f5;
  border-radius: 4px;
  border: 1px solid #ccc;
}

/* 当前页样式 */
.page .cur {
  background-color: #d3d3d3;
  color: #fff;
  cursor: default;
  border: 1px solid #ccc;
}

/* 鼠标悬停时的样式 */
.page a:hover {
  background-color: #d3d3d3; /* 保持灰色悬停 */
  color: #fff;
  border-color: #ccc;
}

/* “...” 部分，没有背景 */
.page .PageMore {
  color: #666;
  cursor: default;
}

/* “下一页”按钮样式 */
.page .next {
  background-color: #d3d3d3;
  color: #666;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.page .next:hover {
  background-color: #d3d3d3; /* 保持灰色悬停 */
  color: #666;
  border-color: #ccc;
}

/* 小屏幕时的分页样式调整 */
@media (max-width: 768px) {
  .page {
    flex-wrap: wrap;
  }

  .page a,
  .page .PageMore {
    margin-bottom: 5px;
  }
}
</style>
